$color1: var(--van-primary-color); // 字体 —— 主色
$color2: var(--color2, #00ffff); // 字体 —— 辅色1
$color3: var(--color3, #333333); // 字体 —— 辅色2
$color4: var(--color4, #666666); // 字体 —— 辅色3
$color5: var(--color5, #999999); // 字体 —— 辅色3
$border: var(--border, #f5f5f5); // 边框颜色
$fault: var(--fault, #f74a4a); // 故障色
$hover: var(--hover, #428392); // hover色
$active: var(--active, #36a981); // 选择色

/*
 * @description 混合宏
 * @define       @mixin name($param){}
 * @callback     @include name(param, param)
 * 注意点: 混合宏的传参得严格按照 形参的顺序传值
*/
//  flex布局
@mixin flex($alignItems: center, $justifyContent: center, $direction: row) {
  display: flex;
  flex-direction: $direction;
  align-items: $alignItems;
  justify-content: $justifyContent;
}

// 设置背景
@mixin bg($url, $width: 100%, $height: 100%, $color: transparent) {
  background: $color url($url) no-repeat center;
  background-size: $width $height;
}

// 文字溢出隐藏
@mixin oflow() {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 文字溢出隐藏（多行文字）
@mixin oflowMore($num: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $num;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
